<template>
  <div>
    <van-nav-bar fixed>
      <template #left>
        <!-- .代表文件所在的文件夹 -->
        <!-- ..上一级views文件夹 -->
        <!-- ../..上一级的上一级（src文件夹） -->
        <img class="logo" src="../../assets/logo.png" />
      </template>
      <template #right>
        <van-icon name="search" size="0.48rem" color="white" />
      </template>
    </van-nav-bar>
    <van-tabs v-model="active" animated sticky offset-top="1.226667rem" @click="channelClickFn">
      <van-tab :title="item.name" v-for="item in channeList" :key='item.id' :name="item.id">
          <!-- 文章列表使用 -->
          <!-- 8================================================== -->
            <!-- 要传给ArticleList内部，让他内部发生循环，所以把值传给他 ,然后在ArticleList里定义一个变量接着-->
         <ArticleList :arr="articleList"> </ArticleList>
      </van-tab>

    </van-tabs>
  </div>
</template>
<script>
// 2 导入接口articleListAPI=================================
import { userchannelAPI, articleListAPI } from '@/api'
import ArticleList from './ArticleList.vue'// 文章列表引入

// 时间
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'// 插件
import 'dayjs/locale/zh-cn'

export default {
  data () {
    return {
      active: 0, // 是当前点击的下标
      channeList: [], // 默认打开就是频道数组
      // 3.定义一个变量channelId=============================
      channelId: 0, // 默认零就是推荐频道
      //   6===============================================
      articleList: []// 声明一个变量保存后台请求过来的文章数组

    }
  },
  async  created () { // async是和函数名前边加
    const res = await userchannelAPI()// await加到异步请求的这个方法前，方法前加await原地返回一个成功结果，所以用变量接受一下
    console.log(res)
    this.channeList = res.data.data.channels

    // 网页打开时先请求一次列表
    this.getArticleList()
    // // 4网页刚打开就发送请求await 需要传参==================================================
    // const res2 = await articleListAPI({
    //   channelId: this.channelId// 传的是方法的参数
    // })

    // // 回来的数据进行预处理, 后台返回的数据无法直接使用，提前对数据进行转换把时间转成多久多久之前
    // res2.data.data.results.forEach((obj) => {
    //   obj.pubdate = this.toTimeAge(obj.pubdate) // 把pubdate重新赋值
    // })

    // // 7拿到数据==============================================
    // this.articleList = res2.data.data.results

    // // 5===================================
    // console.log(res2)// 原地打印传过来的数据

    // 时间
    // console.log(this.toTimeAge('2019-01-01'))
  },
  //   时间预处理

  methods: {
    async getArticleList () { // 封装
      const res2 = await articleListAPI({
        channelId: this.channelId// 传的是方法的参数
      })
      res2.data.data.results.forEach((obj) => {
        obj.pubdate = this.toTimeAge(obj.pubdate) // 把pubdate重新赋值
      })
      this.articleList = res2.data.data.results
    },

    toTimeAge (targetTime) {
      dayjs.extend(relativeTime)
      dayjs.locale('zh-cn')
      const a = dayjs()
      const b = dayjs(targetTime)
      return a.to(b)
    },
    //   频道点击事件
    channelClickFn (channeId) {
    //   channeId就拿到了van-tab身上绑定的name值（频道id注意有点像索引担不是）
      this.channelId = channeId// 把我们获取到的频道id保存到data的变量上
      this.getArticleList()// 点击时切换频道，同时获取频道id,再根据频道id请求一次列表
    }
  },

  //   文章列表
  components: {
    ArticleList

  }
}
</script>

<style>
.logo {
  width: 100px;
  height: 30px;
}
.van-tabs{
    padding-top:46px;
}
</style>
